<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="数据库类型" prop="label">

    <el-radio v-model="form.dbType" label="mysql" size="large">mySql</el-radio>
    <el-radio v-model="form.dbType" label="mssql" size="large" disabled>msSql</el-radio>
    <el-radio v-model="form.dbType" label="sqlite" size="large" disabled>sqlite</el-radio>
    <el-radio v-model="form.dbType" label="redis" size="large"  disabled>redis</el-radio>



            </el-form-item>
            <el-form-item label="连接标识" prop="label">
                <el-input v-model="form.label" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="dbHost">
                <el-input v-model="form.dbHost" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="数据库名称" prop="dbDatabaseName">
        <el-input v-model="form.dbDatabaseName" autocomplete="off"></el-input>
      </el-form-item> -->

            <el-form-item label="用户名" prop="dbUserName">
                <el-input v-model="form.dbUserName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="dbPassword">
                <el-input v-model="form.dbPassword" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="端口" prop="dbPort">
                <el-input v-model="form.dbPort" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closepop">取 消</el-button>
            <el-button type="primary" @click="submitConn">确 定</el-button>
        </div>
    </div>
</template>
<style lang="stylus">
.page_container {
  // background: red;
  height: 100%;

  &>.el-header {
    line-height: 60px;
    background: #3c3c3c;
  }

  .page-el-aside {
    background: #ddd;
  }
}
</style>
<script>
// var mysql = require("mysql"); //引入mysql模块

// var connection = mysql.createConnection({      //创建mysql实例
//     port:'3306',
//     host     : 'localhost',
//     user     : 'r666t',
//     password : 'shi666',
//     database : 'test666'
// });

export default {
    name: 'App',
    props: {
        connFormVisible: {
            type: Boolean,
            default: false,
        },
        checkMenuItemId: {
            default: 0,
        },
    },
    data() {
        return {
            form: {
                label: '',
                dbDatabaseName: '',
                dbHost: 'localhost',
                dbUserName: '',
                dbPassword: '',
                dbPort: '3306',
                type: 'connection',
                dbType: "mysql",
            },
            dbs: [],
            rules: {
                label: [{ required: true, message: '请填写连接标识', trigger: 'blur' }],
                //   dbDatabaseName: [
                //     { required: true, message: '请填写数据库名称', trigger: 'blur' }
                //   ],
                dbHost: [
                    { required: true, message: '请填写连接地址', trigger: 'blur' },
                ],
                dbUserName: [
                    { required: true, message: '请填写用户名', trigger: 'blur' },
                ],
                dbPassword: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                ],
                dbPort: [{ required: true, message: '请填写端口号', trigger: 'blur' }],
            },
        }
    },

    // {
    //           id: "1",
    //           label: "myhost",
    //           type: "connection",
    //           dbUserName: "adafd",
    //   dbHost:'localhost'
    //           dbDatabaseName: "adafd",
    //           dbPassword: "adafd",
    //           dbPort: "adafd",
    //           dbConnected: false,
    //           dbType: "mysql",
    //           children: [
    //             {
    //               type: "dataBase",
    //               label: "数据库 1-1",
    //               children: [
    //                 {
    //                   label: "表 1-1",
    //                   type: "dbTabel",
    //                 },
    //                 {
    //                   label: "表 1-2",
    //                   type: "dbTabel",
    //                 },
    //               ],
    //             },
    //           ],
    //         },
    async created() {
    // this.dbs = this.$utools.db.get("connObject") || false;
        this.dbs = this.$utools.db.get('connObject') || false
      
        console.log(this.dbs)
        if (this.connFormVisible == true) {
            if (this.checkMenuItemId != '0') {
                if (this.dbs == false) {
                    this.$message.error('未查询到任何数据库信息')
                    setTimeout(() => {
                        this.closepop()
                    }, 100)
                }
                let check_item = false
                this.dbs.data.forEach((item, index) => {
                    if (item.id == this.checkMenuItemId) {
                        check_item = true
                        this.form = item
                    }
                })
                if (check_item == false) {
                    setTimeout(() => {
                        this.$message.error('未查询到任何数据库信息')
                    }, 100)
                    this.closepop()
                }
            }
        }
    },
    mounted() {},

    methods: {
        closepop() {
            this.$emit('closeAddConn')
        },
        submitConn() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return
                }
        
                //  this.dbs.data=[];

                this.form.id = this.form.id
                    ? this.form.id
                    : Math.round(Math.random() * 999999999)
                // if (false) {
                if (this.checkMenuItemId != '0') {
                    console.log(this.dbs)
                    this.dbs.data.forEach((item, index) => {
                        if (item.id == this.checkMenuItemId) {
                            this.dbs.data[index] = this.form
                        }
                        //     console.log(  this.dbs.data[index])
                        //     this.dbs.data[index].type= this.dbs.data[index].type? this.dbs.data[index].type:'connection';
                        //      this.dbs.data[index].id==  this.dbs.data[index].id? this.dbs.data[index].id
                        //   : Math.round(Math.random() * 999999999);
                    })
                } else {
                    if (this.dbs == false) {
                        this.dbs = {
                            _id: 'connObject',
                            data: [],
                        }
                    }
                    console.log(this.dbs.data)

                    this.dbs.data.push(this.form)
                }
                this.$utools.db.put(this.dbs)
                this.closepop(this.dbs)
            })
        },
    },
}
</script>
